import React from 'react';
import { Card, Avatar, Tooltip } from 'antd';
import { DeleteOutlined, HolderOutlined } from '@ant-design/icons';
import { SvgIcon } from '@/components/icon';
import AvatarDisplay from '@/components/work-modal/components/AvatarDisplay';

export interface FusionAppItemProps {
  name: string;
  description: string;
  icon?: React.ReactNode;
  onDelete?: () => void;
  dragHandleProps?: React.HTMLAttributes<HTMLDivElement>;
  style?: React.CSSProperties;
  className?: string;
}

const FusionAppItem: React.FC<FusionAppItemProps> = ({
  name,
  description,
  icon,
  onDelete,
  dragHandleProps,
  style,
  className,
}) => {
  return (
    <Card
      className={`hover:bg-[#F7F8FA] flex fusion-card items-center rounded-md shadow-sm mb-2 group ${className || ''}`}
      style={{ ...style, padding: 0, marginBottom: 12 }}
      bodyStyle={{ display: 'flex', alignItems: 'center', width: '100%' }}
    >
      <div {...dragHandleProps} className="cursor-move mr-2 text-gray-400 flex items-center">
        {/* <HolderOutlined style={{ fontSize: 20 }} /> */}
        <SvgIcon
          size="16"
          icon="ai-orch-hold"
        />
      </div>

      {icon ?
        <AvatarDisplay src={icon as string} size={40} className = 'h-[40px] w-[40px]'/> :
        <Avatar size={40} className="bg-cyan-200 text-white">
          {name.slice(0, 2) || '应'}
        </Avatar>
      }
      <div className="flex-1 min-w-0 ml-2">
        <div className="font-medium text-base truncate w-full">{name}</div>
        <div className="text-gray-400 text-xs truncate w-full max-w-full">{description}</div>
      </div>
      {onDelete && (
        // <Tooltip title="删除">
          <div className="ml-4 items-center hidden group-hover:flex" style={{ height: 40 }}>
            {/* <DeleteOutlined
              className="text-gray-400 hover:text-red-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={onDelete}
              style={{ fontSize: 18 }}
            /> */}
            <SvgIcon
              className="text-gray-400 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
              size="16"
              onClick={onDelete}
              icon="ai-orch-delete"
            />
          </div>
        // </Tooltip>
      )}
      <style>
        {`
          .fusion-card .ant-card-body{
            padding: 8px 8px 8px 4px !important;
            border-radius: 6px !important;
          }
          .fusion-card {
            border: none !important;
          }
        `}</style>
    </Card>
  );
};

export default FusionAppItem; 